<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>足球圈移动端布局</title>
  <link rel="stylesheet" href="足球圈font/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    html {
      font-size: 5vw;
    }

    /* 
        320px === 100vw
        16px === 5vw        
        */

    header {
      height: 2.75rem;
      background: #0cc440;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    header div {
      width: 3.75rem;
      height: 1.5625rem;
      line-height: 1.5625rem;
      text-align: center;
      font-size: .75rem;
    }

    header div:nth-child(1) {
      border-radius: .75rem 0 0 .75rem;
      background: #63d985;
      color: white;
    }

    header div:nth-child(2) {
      border-radius: 0 .75rem .75rem 0;
      background: #3dd066;
      color: #9eeabb;
    }

    section {
      flex: 1;
      overflow: auto;
      /* 溢出 */
    }

    section ul {
      display: flex;
      position: sticky;
      /* 粘性定位 */
      top: 0;
      background: white;
    }

    section ul li {
      flex: 1;
      text-align: center;
      height: 2.1875rem;
      line-height: 2.1875rem;
      border-bottom: .0625rem solid #d9d9d9;
      color: #676767;
      font-size: .875rem;
    }

    section ul li:hover {
      border-bottom: .125rem solid #08c63e;
      color: #05ca3c;
    }

    section .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    section .list>div {
      width: 49%;
      margin-top: .25rem;
      border: .0625rem solid #e1e8e1;
    }

    section .list>div img {
      width: 100%;
    }

    section .list>div p {
      height: 1.875rem;
      line-height: 1.875rem;
      font-size: .75rem;
      text-indent: .625rem;
    }

    footer {
      height: 2.75rem;
      background: #ffffff;
      color: #d1d1d3;
    }

    footer ul {
      display: flex;
      height: 100%;
    }

    footer li {
      /* height: 100%; */
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    footer li:hover {
      color: #0cc347;
    }

    footer li i {
      height: 1.3125rem;
      line-height: 1.3125rem;
      text-align: center;
      font-size: 1rem;
    }

    footer li span {
      height: 1.0625rem;
      line-height: 1.0625rem;
      text-align: center;
      font-size: .75rem;
    }

    footer li:nth-child(3) {
      position: relative;
    }

    footer li:nth-child(3) i {
      width: 3.25rem;
      height: 3.25rem;
      border: .0625rem solid #e5e5e5;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      margin-left: -1.625rem;
      top: -0.5rem;
      font-size: 1.875rem;
      text-align: center;
      line-height: 3.25rem;
      background: white;
    }

    .iconfont {
      font-size: 1rem;
    }
  </style>
  <script>
    //fontsize 计算
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 16 + 'px'

        //fontsize = 当前设备的css布局宽度/物理分辨率（设计稿的宽度）*基准font-size

        //rem ==== 等比例缩放布局
  </script>
</head>

<body>
  <header>
    <div>热点</div>
    <div>关注</div>
  </header>
  <section>
    <ul>
      <li>足球现场</li>
      <li>足球生活</li>
      <li>足球美女</li>
    </ul>
    <div class="list">
      <div>
        <img src="pic.png" alt="">
        <p>大家好</p>
      </div>
      <div>
        <img src="pic.png" alt="">
        <p>大家好</p>
      </div>
      <div>
        <img src="pic.png" alt="">
        <p>大家好</p>
      </div>
      <div>
        <img src="pic.png" alt="">
        <p>大家好</p>
      </div>
      <div>
        <img src="pic.png" alt="">
        <p>大家好</p>
      </div>
      <div>
        <img src="pic.png" alt="">
        <p>大家好</p>
      </div>
    </div>
  </section>
  <footer>
    <ul>
      <li>
        <i class="iconfont icon-shouye"></i>
        <span>首页</span>
      </li>
      <li>
        <i class="iconfont icon-fangdajing"></i>
        <span>发现</span>
      </li>
      <li>
        <i class="iconfont icon-zhaoxiangji"></i>
      </li>
      <li>
        <i class="iconfont icon-wode"></i>
        <span>我的</span>
      </li>
      <li>
        <i class="iconfont icon-tuichu"></i>
        <span>退出</span>
      </li>
    </ul>
  </footer>
</body>

</html>